<template>
	<view class="head-custom-wrap">
		<template v-if="isSpace">
			<view class="spaceBar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="spaceHead"></view>
		</template>
		<view class="head-custom head-fixed" :class="[isApp ? 'head-app': 'head-transparent',  isSpace ? '' : 'bg-none']">
			<view class="statusBarHeight" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="head fboxRow Ycenter">
				<!-- #ifdef H5 -->
				<view class="left fboxRow Ycenter" v-if="isBack || title || isChange">
					<view class="inner fboxRow Ycenter">
						<view class="action-btn fboxRow Ycenter Xcenter" @click="goHome" v-if="isChange && isHome">
							<text class="bwfont bw-a-zu1221"></text>
						</view>
						<view class="action-btn fboxRow Ycenter" @click="backTap" v-else>
							<text v-if="isBack" class="bwfont bw-fanhui"></text>
						</view>
						<view class="font38 color-E8CDA7 title" @click="backTap" v-if="title">{{ title }}</view>
					</view>
				</view>
				<view class="flex1"></view>
				<view class="right fboxRow Ycenter Xend">					
					<view v-if="!isApp && isAppBtn" class="btn-app fboxRow Ycenter Xcenter font26 bg-linear" @click="openApp">打开APP</view>
					
					<slot name="right"></slot>
					<template v-if="!isApp && isHome && !isChange">
						<view class="action-btn home-action fboxRow Ycenter Xcenter" @click="goHome">
							<text class="bwfont bw-a-zu1221"></text>
						</view>
					</template>
				</view>	
				<!-- #endif -->
				
				<!-- #ifdef MP -->
				<view class="left fboxRow Ycenter">
					<view class="inner-wx fboxRow Ycenter Xcenter" v-if="isBack || isHome">
						<view class="action-btn flex1 fboxRow Ycenter Xcenter" v-if="isBack" @click="backTap">
							<text class="bwfont bw-fanhui"></text>
						</view>
						<view v-if="isHome" class="line"></view>
						<view v-if="isHome" class="action-btn flex1 home-action fboxRow Ycenter Xcenter" @click="goHome">
							<text class="bwfont bw-a-zu1221"></text>
						</view>
					</view>
				</view>
				<view class="flex1"><view class="fboxRow Ycenter Xcenter inner-wx-center font38 color-E8CDA7 title" v-if="title">{{ title }}</view></view>
				<view class="right fboxRow Ycenter Xend">
					<view class="inner-wx" v-if="isBack || isHome">
					</view>
				</view>
				<!-- #endif -->
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAndroidVersion
	} from '@/api/index.js';
	import {
		getRequest
	} from '@/static/js/common.js';
	import {base64decode, base64encode, utf8to16} from '@/static/js/Base64.js';
	// import jWeixin from "weixin-js-sdk"
	export default {
		name: 'head-custom',
		components: {},
		props: {
			title: {
				type: String,
				default: '' // 首页
			},
			isChange:{
				type: Boolean,
				default: false
			},
			isSpace: {
				type: Boolean,
				default: true
			},
			isHome: {
				type: Boolean,
				default: true
			},
			isBack: {
				type: Boolean,
				default: true
			},
			linkData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			linkId: {
				type: String,
				default: 'usr103rs12t9nk1c'
			},
			isAppBtn: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				sys: {},
				statusBarHeight: getApp().globalData.statusBarHeight,
				isApp: false,
				urlAndroid: '',
				timer: null
			};
		},
		computed: {
			_linkData: {
				get() {
					return this.linkData
				},
				set(val) {
					this.$emit('update:linkData', val)
				}
			}
		},
		created() {

			// #ifdef H5
			this.$bridge.initHandler((message, responseCallback) => {
				const responseData = '初始化收收到来自Java的数据，回传数据给你';
				responseCallback(responseData);
			});
			const script = window.document.createElement("script");
			script.type = "text/javascript";
			script.src = "https://g.alicdn.com/jssdk/u-link/index.min.js";
			document.getElementsByTagName("head")[0].appendChild(script);
			// #endif
			this.statusBarHeight = getApp().globalData.statusBarHeight
			if (!getApp().globalData.statusBarHeight) {
				const sys = uni.getSystemInfoSync();
				console.log('111');
				this.statusBarHeight = sys.statusBarHeight
			}
			console.log('statusBarHeight',this.statusBarHeight)
		},
		mounted() {
			const sys = uni.getSystemInfoSync();
			this.sys = sys;
			this.getAndroidUrl()
			const { bw_link } = getApp().getBWData(['bw_link', 'bw_params'])
			this.isApp = bw_link.isApp == 1 ? true : false
			console.log('statusBarHeight',this.statusBarHeight)
		},
		destroyed() {
			clearTimeout(this.timer)
		},
		methods: {
			backTap() {
				if (!this.isBack) {
					return
				}
				// #ifdef H5
				uni.navigateBack({delta:1,success: (res) => {
					this.timer = setTimeout(()=>{
						const data = {
							type: 'back'
						};
						this.$bridge.callHandler('recruitHandler', data, () => {
							console.log('recruitHandler', '返回');
						});
					},500)
				}, fail: () => {
				}})
				// #endif
				// #ifdef MP
				uni.navigateBack()
				// #endif

			},
			goHome() {
				// #ifdef H5
					this.$pageTo('/index/index', '')
				// #endif
				// #ifdef MP
				this.$pageTo('/bwSign/personal/index', 'reLaunch')
					// this.$pageTo('/personal/index')
				// #endif
				console.log('回到首页')
			},
			getAndroidUrl() {
				getAndroidVersion().then(res => {
					this.urlAndroid = res.data.updateAddress
				})
			},
			openApp() {
				const {
					bw_link,
					bw_user_temp
				} = getApp().getBWData(['bw_link', 'bw_user_temp'])
				const href = window.location.href
				let share = getRequest(href, 'bwlink')
				let sharerId = bw_link.sharerId
				if(share){
					share = decodeURIComponent(share)
					const data = JSON.parse(utf8to16(base64decode(share)))
					sharerId = data.sharerId
				}
				const obj = {
					...this._linkData,
					sharerId,
					href: href
					// href: href.substr(0, href.indexOf("?")),
				}
				if(obj.realName){
					obj.realName = encodeURIComponent(obj.realName)
				}
				if(obj.companyName){
					obj.companyName = encodeURIComponent(obj.companyName)
				}
				const bwlink = base64encode(JSON.stringify(obj))
				window.ULink([{
					id: this.linkId, //后台生成的裂变活动LinkID
					data: {
						bwlink
					}, //传递的自定义动态参数
					selector: "#btn", //按钮的名称 //可选高级功能，具体含义请看下方U-Link API文档
					auto: true,
					timeout: 2000,
					lazy: false,
					downloadUrl: this.urlAndroid,
					useOpenInBrowerTips: "default",
					proxyOpenDownload: (defaultAction, LinkInstance) => {
						// console.log(LinkInstance)
						if (LinkInstance.solution.type === "scheme") {
							// console.log('jWeixin', jWeixin)
							// qq或者微信环境特殊处理下
							if (window.ULink.isWechat || window.ULink.isQQ) {
								// 在qq或者微信环境执行内置逻辑，具体内置逻辑为:当设置了useOpenInBrowerTips字段时，qq&&微信&&scheme时，启用蒙层提示去浏览器打开
								defaultAction();
								// jWeixin.showShareImageMenu({
								//  path: window.location.href
							 //   })
							} else {
								const downloadUrl = LinkInstance.solution.downloadUrl
								if (downloadUrl.indexOf('apple.com') != -1) {
									window.location.href = downloadUrl;
								} else {
									window.location.href = this.urlAndroid
								}
								// console.log(this.urlAndroid, LinkInstance.solution.downloadUrl)
							}
						} else if (LinkInstance.solution.type === "universalLink") {
							// console.log('ios')
							// universalLink 唤起应当由服务端提供一个带重定向到appstore的universallink地址。因此，此处不应写逻辑，友盟会在近期上线universalLink 重定向功能。
						}
					}
				}])
			}
		},

	};
</script>

<style lang="scss" scoped>
	.left,
	.right {
		white-space: nowrap;
	}

	.spaceHead {
		width: 100%;
		height: 88rpx;
	}

	.spaceBar {
		width: 100%;
	}

	.mr40 {margin-right: 40rpx;}

	.head-fixed {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 999;
	}
	.bwfont + .title{margin-left: 40rpx;}
	.title{ margin-left: 20rpx; max-width: 200rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
	.head-relative {
		position: relative;
		left: 0;
		top: 0;
		right: 0;
		z-index: 999;
	}

	.statusBarHeight {
		width: 100%;
	}


	.head {
		padding: 0 28rpx 0 20rpx;
		height: 88rpx;
	}

	.btn-app {
		width: 152rpx;
		height: 48rpx;
		border-radius: 8rpx;
		color: #111216
	}
	.btn-app + .action-btn{margin-left: 28rpx;}
	.action-text + .action-btn{margin-left: 28rpx;}
	.head .left .bwfont{font-size: 34rpx;}
	.head .right .bwfont{font-size: 32rpx;}
	.head-transparent{}
	.head-transparent .action-btn{width: 56rpx;height: 56rpx;background: rgba(0,0,0,0.2);border-radius: 50%;text-align: center; align-items: center;justify-content: center;}
	.head-app{background-color: var(--controllerBgColor);}
	.head-fixed.bg-none{background: none;}

	.inner-wx{width: 152rpx;height: 56rpx;background: rgba(33,36,44,0.35);border-radius: 28rpx;border: 1px solid #D8D8D8;}
	.inner-wx .line{width: 1rpx;height: 22rpx;background-color: #D8D8D8;}
	.inner-wx .action-btn{background: none;}
	.right .inner-wx{border: 0;background: none;}
	.inner-wx-center{max-width: none;}
</style>